<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
	request.setAttribute("imgShow", "" + request.getParameter("imgShow"));
%>
<script type="text/javascript">
	 function  ${imgShow}(src){
        $("#bigimg").attr("src", src);
        $("<img/>").attr("src", src).load(function(){
            var windowW = $(window).width();
            var windowH = $(window).height();
            var realWidth = this.width;
            var realHeight = this.height;
            var imgWidth, imgHeight;
            var scale = 0.8;
             
            if(realHeight>windowH*scale) {
                imgHeight = windowH*scale;
                imgWidth = imgHeight/realHeight*realWidth;
                if(imgWidth>windowW*scale) {
                    imgWidth = windowW*scale;
                }
            } else if(realWidth>windowW*scale) {
                imgWidth = windowW*scale;
                imgHeight = imgWidth/realWidth*realHeight;
            } else {
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $("#bigimg").css("width",imgWidth);
             
            var w = (windowW-imgWidth)/2;
            var h = (windowH-imgHeight)/2;
            $("#innerdiv").css({"top":h, "left":w});
            $("#outerdiv").fadeIn("fast");
        });
    }
</script>
<style type="text/css">
.close{ width:30px; height:30px; background:url(image/close_3.png) no-repeat 0 0; position:fixed; top:5px; right:30px; _position:absolute; _top:expression(documentElement.scrollTop+5+"px"); cursor:pointer;}
//.close:hover{ background:url(image/close_3.png) no-repeat -30px 0;} 
</style>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999;width:100%;height:100%;display:none;">
    <a class="close" onclick="$('#outerdiv').fadeOut('fast');"></a>
    <div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div>
</div> 
